<script lang="ts" setup name="XtxCity">
/*
显示消失功能
1:定义变量用于控制显示与消失
2：点击请选择地址实现变量切换
3：点击dom区域外实现关闭
地址渲染
1：在pinia中创建state与actions
   actions定义调用接口获取数据
2：在城市组件中调用actions
3:定义数据类型
4：存储数据
5：渲染数据
城市选择逻辑处理
需求：点击省出市 ，点击市出区，点击区关闭弹框，每一次关闭城市列表都还原数据显示
城市选择完成需要拿到城市选择的省市区的code与name
1:定义一个响应式数据用于存储省市区的值（code与name）
2:点击城市时修改该响应式数据
3：选择完成，通知父组件（将该值传递给父组件）
*/

import { ref, watch } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { useStore } from '@/store'
import { CityListType, CitySelected } from '@/types/data.d'
// onClickOutside(dom,()=>{回调方法，在点击了dom区域外后会执行})
const isShow = ref(false)
const target = ref(null)
const emits = defineEmits<{
  (e: 'getSelected', o: CitySelected): void
}>()
defineProps<{
  address: string
}>()
onClickOutside(target, () => {
  isShow.value = false
})

// 调用actions获取城市数据
const { goods } = useStore()
goods.getCityList()
// 城市点击事件处理
// 城市选择完成需要拿到城市选择的省市区的code与name
const citySelectInfo = ref({
  proviceCode: '',
  proviceName: '',
  cityCode: '',
  cityName: '',
  areaCode: '',
  areaName: ''
})
const cityClick = (i: CityListType) => {
  if (i.level === 2) {
    // 区的选择
    citySelectInfo.value.areaName = i.name
    citySelectInfo.value.areaCode = i.code
    // 通知父组件
    // 子传父
    /*
      子组件标签  @子组件方法名="父组件方法"
            父组件方法(形参){

            }
       子组件内
          const emits=defineEmits(['子组件方法名'])  // js
          // ts
          const emits=defineEmits<{
            (e:'子组件方法名',xxx:类型):void
          }>()
          emits('子组件方法名',实参)
    
    */
    emits('getSelected', citySelectInfo.value)
    isShow.value = false
  } else {
    // 省的选择
    if (i.level === 0) {
      citySelectInfo.value.proviceName = i.name
      citySelectInfo.value.proviceCode = i.code
    } else if (i.level === 1) {
      // 市的选择
      citySelectInfo.value.cityName = i.name
      citySelectInfo.value.cityCode = i.code
    }
    goods.setAddressList(i.areaList)
  }
}
// 每一次关闭都还原addRessList数据
// watch:某个值的change事件
watch(isShow, newVal => {
  if (!newVal) {
    goods.setAddressList(goods.initAddressList)
  }
})
</script>
<script lang="ts">
export default {
  name: 'XtxCity'
}
</script>
<template>
  <div class="xtx-city" ref="target">
    <div class="select" @click="isShow = !isShow">
      <span class="placeholder" v-if="address">{{ address }}</span>
      <span class="placeholder" v-else>请选择配送地址</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-show="isShow">
      <span
        class="ellipsis"
        v-for="i in goods.addressList"
        :key="i.code"
        @click="cityClick(i)"
        >{{ i.name }}</span
      >
    </div>
  </div>
</template>

<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
